<template>
  <AddOrEditDialog
    ref="addOrEditDialogRef"
    title="复绿管理"
    dialogWidth="550px"
    formLabelWidth="130px"
    :formHeader="formHeader"
    :form="form"
    :action="action"
    :url="$urls.API_URL_BACKSTAGE_WASTE_WASTEDISPOSALSITEVIRESCENCE_MANAGE"
  >
    <!--    复绿开始时间-->
    <template #beginTime>
      <el-date-picker
        v-model="form.beginTime"
        type="date"
        unlink-panels
        clearable
        format="YYYY-MM-DD"
        value-format="YYYY-MM-DD"
        @change="getbeginTime"
      />
    </template>
    <!--    复绿结束时间-->
    <template #endTime>
      <el-date-picker
        v-model="form.endTime"
        type="date"
        unlink-panels
        clearable
        format="YYYY-MM-DD"
        value-format="YYYY-MM-DD"
        @change="getendTime"
      />
    </template>
    <template #id>
      <el-button v-if="showUploadPhotoButton" @click="uploadPhoto(10)" type="primary" size="small" icon="PictureFilled" plain>上传图片</el-button>
      <!--图片上传方案2-->
      <!-- 图片上传表单 -->
      <PhotoUploadDialog
        ref="photoUploadDialogRef"
        title="图片上传"
        :limit="3"
        :autoUpload="false"
        @uploadSuccess="uploadImgSuccess"
      />
      <!--图片上传方案2-->
    </template>
  </AddOrEditDialog>
</template>

<script lang="ts" setup>
import AddOrEditDialog from '@/components/base/table/form/AddOrEditDialog.vue';
// 导入上传图像组件
import PhotoUploadDialog from '@/components/base/dialog/PhotoUploadDialog.vue';
import {
  defineExpose, defineProps, getCurrentInstance, ref, withDefaults,
} from 'vue';
import { FormHeader } from '@/types/interface/base_interface';
import { Wastedisposalsitevirescence } from '@/types/interface/wastedisposal_interface';
import { useStore } from 'vuex';
import { ElMessage } from 'element-plus';

const { proxy } = getCurrentInstance();

const store = useStore();
  // 接收父容器参数
  interface Props {
    action?: string, // 表单的处理类型，post表示提交，put表示编辑
    showUploadPhotoButton?:boolean, // 是否显示头像上传按钮
    data?: any,
  }

const props = withDefaults(defineProps<Props>(), {
  showUploadPhotoButton: true,
  action: 'post',
  data: '',
});
  // 测绘开始时间
const beginTime = ref('');
// 测绘结束时间
const endTime = ref('');
// 表单元素
const formHeader = ref<FormHeader[]>([
  {
    label: '开始时间',
    prop: 'beginTime',
    type: 'custom',
    rules: [
      {
        required: true,
        message: '复绿开始时间不能为空',
        trigger: 'blur',
      },
    ],
  },
  {
    label: '结束时间',
    prop: 'endTime',
    type: 'custom',
    rules: [
      {
        required: true,
        message: '复绿开始时间不能为空',
        trigger: 'blur',
      },
    ],
  },
  {
    label: '图片',
    prop: 'id',
    type: 'custom',
  },
  {
    label: '文字描述',
    prop: 'remark',
    type: 'textarea',
    rules: [
      {
        required: true,
        message: '不能为空',
        trigger: 'blur',
      },
    ],
  },
]);

// 表单对象
const form = ref<Wastedisposalsitevirescence>();
let formInit: Wastedisposalsitevirescence; // 记录表单第一次传入的值,用于表单重置恢复初始值使用
// 打开对话框，gong供父组件调用，传入表单对象
const addOrEditDialogRef = ref();
const openDialog = (wastedisposalsiteVirescence: Wastedisposalsitevirescence) => {
  formInit = { ...wastedisposalsiteVirescence }; // 获取初始值，这里要做深拷贝，避免与form对象引用的地址一致，导致无法恢复初始值
  form.value = { ...wastedisposalsiteVirescence };
    addOrEditDialogRef.value!.openDialog();
};
  // 判断测绘开始结束时间，禁止测绘结束时间大于开始时间
const compareDate = (d1:any, d2:any) => {
  let reg = new RegExp('-', 'g');
  // 如果传入的测绘结束时间为空，则将表单中的测绘结束时间赋予d2进行判断
  if (d2 === '' || d2 === null) {
    // eslint-disable-next-line no-param-reassign
    d2 = form.value!.endTime;
    if (((new Date(d1.replace(reg, '/'))) > (new Date(d2.replace(reg, '/'))))) {
      ElMessage.error('结束测绘时间不能小于开始测绘时间');
        form.value!.beginTime = '';
        form.value!.endTime = '';
        return false;
    }
  } else if (d1 === '' || d1 === null) { // 如果传入的测绘开始时间为空，则将表单中的测绘开始时间赋予d1进行判断
    // eslint-disable-next-line no-param-reassign
    d1 = form.value!.beginTime;
    if (((new Date(d1.replace(reg, '/'))) > (new Date(d2.replace(reg, '/'))))) {
      ElMessage.error('结束测绘时间不能小于开始测绘时间');
      form.value!.beginTime = '';
      form.value!.endTime = '';
      return false;
    }
  } else {
    // 时间格式 2022-8-11
    if (((new Date(d1.replace(reg, '/'))) > (new Date(d2.replace(reg, '/'))))) {
      ElMessage.error('结束测绘时间不能小于开始测绘时间');
      form.value!.beginTime = '';
      form.value!.endTime = '';
    }
  }
  return true;
};

// 获取测绘开始时间
const getbeginTime = (value:string) => {
  beginTime.value = value;
  // 如果表单中的测绘结束时间存在，则通过compareDate判断测绘时间是否合规
  if (form.value!.endTime !== undefined) {
    compareDate(beginTime.value, endTime.value);
  }
};
  // 获取测绘时间结束时间
const getendTime = (value:string) => {
  endTime.value = value;
  // 交给compareDate判断测绘时间是否合规
  compareDate(beginTime.value, endTime.value);
};
  // 图片上传
const photoUploadDialogRef = ref();
// 当点击图片上传按钮时
const uploadPhoto = (id:number) => {
  // 设置图片上传地址
  let uploadImgUrl = proxy.$urls.API_URL_BACKSTAGE_WASTE_WASTEDISPOSALSITEVIRESCENCE_MANAGE_UPLOADIMG.replace('{id}', id);
  photoUploadDialogRef.value.openDialog(uploadImgUrl);
};
  // 当头像上传成功
const uploadImgSuccess = () => {
  // 重新加载表格
};
  // 提交表单成功后的钩子函数
const afterSubmitSuccess = () => {
  // 让表单恢复为传入对象时的初始值，注意要深度拷贝，避免初始值收到污染
  form.value = { ...formInit };
};
  // 暴露组件给父容器使用
defineExpose({
  openDialog,
});
</script>

<style scoped>

</style>
